<!-- filter bar -->
<div *ngIf="isTable" class="my-2 flex flex-wrap gap-2 column-gap-5">
    <div class="w-20rem">
        <p-selectButton [options]="levels" [(ngModel)]="filter.level" (onChange)="refreshEvents(null)"></p-selectButton>
    </div>

    <div class="flex align-items-center gap-2 flex-none">
        <div>Machine:</div>
        <p-dropdown
            [options]="machines"
            [(ngModel)]="selectedMachine"
            optionLabel="address"
            id="machines-events"
            placeholder="any"
            showClear="true"
            tooltip="Show events related to selected machine"
            styleClass="max-w-14rem w-12rem"
            (onChange)="onMachineSelect($event)"
        ></p-dropdown>
    </div>

    <div class="flex align-items-center gap-2 flex-none">
        <div>App Type:</div>
        <p-dropdown
            [options]="appTypes"
            [(ngModel)]="selectedAppType"
            optionLabel="name"
            id="app-events"
            placeholder="any"
            showClear="true"
            tooltip="Show events related to selected app type"
            styleClass="max-w-14rem w-10rem"
            (onChange)="onAppTypeSelect($event)"
        ></p-dropdown>
    </div>

    <div class="flex align-items-center gap-2 flex-none">
        <div>Daemon:</div>
        <p-dropdown
            [options]="daemonTypes"
            [(ngModel)]="selectedDaemonType"
            optionLabel="name"
            id="daemon-events"
            placeholder="any"
            showClear="true"
            tooltip="Show events related to selected daemon type"
            styleClass="max-w-14rem w-10rem"
            (onChange)="onDaemonTypeSelect($event)"
        ></p-dropdown>
    </div>

    <div class="flex align-items-center gap-2 flex-none" *ngIf="auth.superAdmin()">
        <div>User:</div>
        <p-dropdown
            [options]="users"
            [(ngModel)]="selectedUser"
            optionLabel="login"
            id="user-events"
            placeholder="any"
            showClear="true"
            tooltip="Show events related to selected user"
            styleClass="max-w-14rem w-10rem"
            (onChange)="onUserSelect($event)"
        ></p-dropdown>
    </div>
</div>

<!-- events table -->
<p-table
    [value]="events.items"
    class="events-table"
    styleClass="p-datatable-striped"
    [ngClass]="{
        'events-table--table': isTable,
        'events-table--bare': isBare
    }"
    [paginator]="true"
    [rows]="10"
    [lazy]="true"
    [loading]="loading"
    (onLazyLoad)="refreshEvents($event)"
    [totalRecords]="events.total"
    [rowsPerPageOptions]="showRowsPerPage ? [10, 30, 100] : undefined"
    [showCurrentPageReport]="isTable"
    currentPageReportTemplate="{currentPage} of {totalPages} pages"
    dataKey="id"
    paginatorDropdownAppendTo="body"
    [first]="start"
>
    <ng-template *ngIf="isTable" pTemplate="header">
        <tr>
            <th class="events-table__level">Level</th>
            <th class="events-table__date">Created At</th>
            <th class="events-table__text">Event Text</th>
            <th class="events-table__details">Details</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-ev let-expanded="expanded">
        <tr>
            <td class="events-table__level events-table__level--info" *ngIf="ev.level === undefined || ev.level === 0">
                <i class="pi pi-info-circle"></i>
            </td>
            <td class="events-table__level events-table__level--warning" *ngIf="ev.level === 1">
                <i class="pi pi-exclamation-triangle"></i>
            </td>
            <td class="events-table__level events-table__level--error" *ngIf="ev.level === 2">
                <i class="pi pi-exclamation-circle"></i>
            </td>

            <td class="events-table__date">{{ ev.createdAt | localtime }}</td>

            <td class="events-table__text">
                <app-event-text [text]="ev.text"></app-event-text>
                <p *ngIf="isBare && expandedEvents.has(ev.id)" [innerHTML]="ev.details"></p>
            </td>

            <td *ngIf="isTable" [innerHTML]="ev.details"></td>
            <td *ngIf="isBare">
                <button
                    *ngIf="ev.details"
                    type="button"
                    pButton
                    pRipple
                    (click)="onToggleExpandEventDetails(ev.id)"
                    class="p-button-text p-button-plain p-button-sm"
                    [icon]="expandedEvents.has(ev.id) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
                ></button>
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="emptymessage">
        <tr>
            <td colspan="4"><div class="events-table__empty">No events found</div></td>
        </tr>
    </ng-template>
</p-table>
